<template>
    <div>
        <div>
            <div style="padding-top: 10px">
                <div style="width: 70%; margin: 0 auto">
                    <el-card style="margin-top: 20px;margin-bottom: 10px;display: flex;justify-content: left">
                        <p slot="header">推荐分类</p>
                        <el-tag size="small" style="margin: 10px" v-for="item in Scinelist" :key="item"
                                @click="addSelect(item)">{{item}}</el-tag>
                    </el-card>
                    <p style="text-align: left">已选择分类：
                        <el-tag size="small" style="margin: 10px">{{selectType}}</el-tag>
<!--                        <el-tag size="small" style="margin: 10px" v-for="item in selectType" :key="item">{{item}}</el-tag>-->
                    </p>
                    <spot-list></spot-list>
                </div>

            </div>
            <div class="tail" style="width: 100%;height:200px;background-color: #f4ffb8;margin: 0">
                <p>developed by lark chan</p>
            </div>
        </div>
    </div>
</template>

<script>
    import SpotList from "./items/SpotList";
    import axios from 'axios'
    export default {
        name: "Classify",
        data(){
            return{
                Scinelist:['风景','游乐','美食','文化','历史','城市','自然','人文'],
                // selectType:['风景']
                selectType:'风景'
            }
        },
        components: {SpotList},
        methods:{
            addSelect(item){
                this.selectType=item
                // this.selectType.push(item)
                // this.selectType=Array.from(new Set(this.selectType))
            },
            async searchByClass(){
                axios.post('http://localhost:5000/searchbyclass',{'type':this.selectType}).then(res=>{
                    console.log(res)
                })
            },

        }
    }
</script>

<style scoped>

</style>
